<script setup lang="ts">
defineOptions({
  name: 'AuthenticationFormView'
});
</script>

<template>
  <div class="relative flex-col-center bg-white px-6 py-10 lg:flex-initial lg:px-8">
    <slot></slot>

    <!-- Router View with Transition and KeepAlive -->
    <RouterView v-slot="{ Component, route }">
      <Transition appear mode="out-in" name="slide-right">
        <KeepAlive :include="['LoginView']">
          <component :is="Component" :key="route.fullPath" class="mt-6 w-full enter-x sm:mx-auto md:max-w-md" />
        </KeepAlive>
      </Transition>
    </RouterView>

    <!-- Footer Copyright -->
    <div class="absolute bottom-3 flex text-center text-xs text-muted-foreground">
      <slot name="copyright"></slot>
    </div>
  </div>
</template>
